<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button {
            width: 80px;
            height: 50px;
            font-size: 18px;
            cursor: pointer;

        }
    </style>
</head>

<body>
    <div id="wrap">
        <h2>模拟封装jQuery</h2>
        <div class="list">
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
            <li>07</li>
            <li>08</li>
        </div>
        <div class="buttons">
            <button class="html">html</button>
            <button class="hid">hid</button>
            <button class="show">show</button>
            <button class="width">width</button>
            <button class="height">height</button>
            <button class="css">css</button>
        </div>
    </div>
</body>
<script>

    // 构造函数
    function GetEle(selector) {
        if (typeof selector == "string") {
            this.eles = document.querySelectorAll(selector)
        } else if (selector instanceof HTMLElement) {
            this.eles = [selector];  //如果是 原生dom元素
        } else if ("length" in selector) { //如果是一个集合 [li li li];
            this.eles = selector;
        } else if (selector.construct === GetEle) { // 接收一个实例
            return selector;
        }
    }
    // html文字
    GetEle.prototype.html = function (con) {
        if (arguments.length >= 1) {
            this.each(function (ele, i) {
                ele.innerHTML = con;
            })
        } else {
            return this.eles[0].innerHTML;
        }
    }
    // 文本元素
    GetEle.prototype.text = function (con) {
        if (arguments.length >= 1) {
            this.each(function (ele, i) {
                ele.innerText = con;
            })
        } else {
            return this.eles[0].innerText;
        }
    }
    // 表单元素
    GetEle.prototype.val = function (con) {
        if (arguments.length >= 1) {
            // for(let i = 0; i < this.eles.length; i++){
            //     this.eles[i].value = con;
            // }
            this.each(function (ele, i) {
                ele.value = con;
            })
        } else {
            return this.eles[0].value;
        }
    }
    // 元素宽度
    GetEle.prototype.width = function (con) {
        if (arguments.length >= 1) {
            this.each(function (ele, i) {
                var unitReg = /^\d+(px|pt|vh|vw|em|%|rem)$/;
                if (unitReg.test(con)) {       // 有单位 => 直接赋值
                    ele.style.width = con;
                } else {
                    ele.style.width = con + "px";
                }
            })
        } else {
            // return this.eles[0].style.width;
            return parseFloat(getStyle(this.eles[0], "width"));
        }
    }
    // 元素高度
    GetEle.prototype.height = function (con) {
        if (arguments.length >= 1) {
            this.each(function (ele, i) {
                var unitReg = /^\d+(px|pt|vh|vw|em|%|rem)$/;
                if (unitReg.test(con)) {       // 有单位 => 直接赋值
                    ele.style.height = con;
                } else {
                    ele.style.height = con + "px";
                }
            })
        } else {
            // return this.eles[0].style.height;
            return parseFloat(getStyle(this.eles[0], "height"));
        }
    }
    // 元素样式 
    GetEle.prototype.css = function (attr, val) {
        if (arguments.length >= 2) {
            this.each(function (ele, i) {
                ele.style[attr] = val;
            })
        } else {
            if (Object.prototype.toString.call(attr) == '[object,Object]') {
                for (var key in attr) {
                    var val = attr[key];
                    this.css(key, val);
                }
            }
            return this.getStyle(attr);
        }
    }
    // 元素隐藏
    GetEle.prototype.hid = function () {
        this.each(function (ele, i) {
            ele.style.display = "none";
        })
    }
    // 元素显示
    GetEle.prototype.show = function () {
        this.each(function (ele, i) {
            ele.style.display = "inline-block";
        })
    }

    GetEle.prototype.getStyle = function (attr) {
        var ele = this.eles[0];     //集合中的第一个元素
        try {
            return window.getComputedStyle(ele)[attr];
        } catch (err) {
            return window.currentStyle[attr];
        }
    }

    GetEle.prototype.click = function (fn) {
        this.each(function (ele, i) {
            //  接收一个回调函数绑定给每个循环的当前元素
            // ele.onclick = fn;
            // 在jquery中，事件是通过addEventListener绑定的
            ele.addEventListener("click", fn);
        })
    }
    // jQuery封装each
    GetEle.prototype.each = function (fn) {
        for (let i = 0; i < this.eles.length; i++) {
            let ele = this.eles[i];
            fn(ele, i);
        }
    }

    function getStyle(ele, attr) {
        try {
            return window.getComputedStyle(ele)[attr];
        } catch (err) {
            return window.currentStyle[attr];
        }
    }
    // 对GetEle进行二次封装s
    function $(selector) {
        return new GetEle(selector);
    }


    // var $li = new GetEle(".list li");

    // $li.click(function(){
    //     console.log(this); 
    // });

    $(".html").click(function () {
        $(".list li").html("周宇笨蛋");
    })
    $(".hid").click(function () {
        $(".hid").hid();
    })
    $(".show").click(function () {
        $(".hid").show();
    })
    $(".width").click(function () {
        $(".list li").width("100px");
    })
    $(".height").click(function () {
        $(".list li").height("100px");
    })
    $(".css").click(function () {
        $(".list li").css({
            width: "100px",
            height: "100px",
            background: "#fde",
            border: "1px solid black",
            "line-height": "100px",
            "list-style": "none",
        });
    })







</script>

</html>